<template>
  <div class="menu">
    <div class="menu-left">
      <ul>
        <li class="menu-item" v-for="(menu, index) in menus" :key="index">
          <p class="text">{{ menu.name }}</p>
        </li>
      </ul>
    </div>
    <div class="menu-right">
      <ul>
        <li class="cate" v-for="(menu, index1) in menus" :key="index1">
          <h4 class="cate-title">{{ menu.name }}</h4>
          <ul class="cate-item">
            <li v-for="(item, index2) in menu.children" :key="index2"> 
              <router-link class="cate-item-wrapper" to="">
                <div class="cate-item-img">
                  <img :src="item.picture" alt="">
                </div>
                <span>{{ item.name }}</span>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted ,ref} from 'vue'
import { getCategoryList } from '../api'

onMounted(() => {
  loadCategoryList()
})
const menus = ref([])
const loadCategoryList = async () => {
  let data = await getCategoryList()
  const treeData = convertToTree(data) 
  menus.value = treeData
}
const convertToTree = data => { const treeData = []
const map = {}
 for (const item of data) {
map[item.id] = { ...item, children: [] }
}
 for (const item of data) {
  const node = map[item.id] 
  if (item.pid === 0) {
treeData.push(node) } else {
const parent = map[item.pid] 
parent.children.push(node)
} }
return treeData }
</script>

<style lang="less" scoped>
 ul {
   margin: 0;
   padding: 0;
 }

 li {
   list-style: none;
 }

 .menu {
   display: flex;
   position: absolute;
   text-align: center;
   top: 46px;
   bottom: 50px;
   width: 100%;
   overflow: hidden;

   .menu-left {
     flex: 0 0 80px;
     width: 80px;
     background: #f3f5f7;
     line-height: 54px;

     .menu-item {
       height: 54px;
       width: 100%;
       border-bottom: 1px solid #e1e1e1;

       .text {
         width: 100%;
         margin: 0;
       }
     }

     .current {
       width: 100%;
       background: #fff;

       .text {
         color: red;
       }
     }
   }

   .menu-right {
     flex: 1;
     background: #fff;

     .cate {
       height: 100%;

       .cate-title {
         margin: 0;
         text-align: left;
         font-size: 14px;
         color: #333;
         font-weight: bold;
         padding: 10px;
       }

       .cate-item {
         padding: 7px 10px 10px;
         display: flex;
         overflow: hidden;
         flex-flow: row wrap;

         li {
           width: 33.3%;

           .cate-item-wrapper {
             .cate-item-img {
               width: 100%;

               img {
                 width: 70px;
                 height: 70px;
               }
             }

             span {
               display: inline-block;
               font-size: 14px;
               color: #333;
             }
           }
         }
       }
     }
   }
 }
</style>